<template>
  <div>
    <el-form :model="form" ref="loginForm" :rules="rules">
      <el-form-item label="用户名" prop="loginName">
        <el-input
          autocomplete="off"
          v-model="form.loginName"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <div class="mima">
          <el-input
            :type="zhuangtai"
            autocomplete="off"
            v-model="form.password"
            placeholder="请输入密码"
            ref="pwrew"
          >
          </el-input>
          <i
            :class="zhuangtai === 'password' ? 'el-icon-minus' : 'el-icon-view'"
            @click="qiuhuan"
          >
          </i>
        </div>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="form.code"></el-input>
        <div @click="yzma">
          <img :src="src" alt="" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      form: {
        loginName: 'admin',
        password: 'admin',
        // code: '',
      },
      src: '',
      zhuangtai: 'password',
      rules: {
        loginName: [
          { required: true, message: '请填写用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          {
            min: 5,
            max: 16,
            message: '密码的长度在6-16位之间 ',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    this.yzma()
  },
  methods: {
    qiuhuan() {
      this.zhuangtai === 'password'
        ? (this.zhuangtai = 'text')
        : (this.zhuangtai = 'password')
      this.$nextTick(() => {
        this.$refs.pwrew.focus()
      })
    },
    async submitForm() {
      try {
        await this.$refs.loginForm.validate()
        const res = await this.$store.dispatch('user/loginApicotion', {
          loginName: this.form.loginName,
          password: this.form.password,
          clientToken: 1,
          loginType: '0',
          code: this.form.code,
        })
        console.log(res);
        // this.$router.push('/')
      } catch (e) {
        console.log(e)
      }
    },
    async yzma() {
      const res = await axios({
        url: `https://likede2-admin.itheima.net/likede/api/user-service/user/imageCode/${1}`,
        responseType: 'blob',
      })
      console.log(res)
      this.src = window.URL.createObjectURL(res.data)
      // console.log(this.src)
    },
  },
}
</script>

<style>
.mima {
  display: flex;
}
.mima i {
  width: 50px;
  margin: 0 auto;
}
</style>
